<template>
  <div class="AddressSeek">
     <div id="AddressSeek_head">
	  <div id="crity_list" v-on:touchstart="crity_list()">
	     <span id="CityName">北京市</span>
		 <span :class="up_Down"></span>
	  </div>
	  <input type="text" id="input_search_key" placeholder="请输入关键词" v-model="Seeks" v-on:input="SEEK()">
	  <span  id="abolish" v-on:touchstart="abolish()">取消</span>
	</div>
	<div id="seekLIST" v-if="isSeekLIST">
	    <ul>
		   <li v-on:touchstart="UserSeek()">
		        <h2>您当前的搜索信息</h2>
		        <p ref="user_eek">{{Seeks}}</p>
		   </li>
		   <li v-for="(seek,index) in seek_LIST" v-on:touchstart="del(index)" >
		       <h2>{{seek.name}}</h2>
			   <p>{{seek.addr}}</p>
		   </li>
		</ul>
	</div>
    <div id="AddressSeek_main">
	   <Map></Map>
	</div>
  </div>
</template>

<script>
import {jsonp} from "./jsonp.js"
import Map from './map.vue'
export default {
  name: 'hello',
  data () {
    return {
      up_Down:"glyphicon glyphicon-menu-down",
	  Seeks:"",
	  seek_LIST:[],
	  isSeekLIST:false
    }
  },
  components:{
     Map
	 
  },
  created(){
       this.seek();   
  },
  methods:{
       abolish(){
	       this.$router.push({
		     path:"/"
		   })
	   },
	   seek(){
	     var _this =this
	       var url = "http://api.map.baidu.com/?qt=s&c=340&wd="+this.Seeks+"&rn=20&ie=utf-8&oue=1&fromproduct=jsapi&res=api&callback=seek&ak=b2tdmZtPCKfwW8iwn5svaT03";
	      jsonp(url,"seek",function(e1){
		       _this.seek_LIST = e1.content;
			   
		  })   
	   },
	   SEEK(){
	      this.isSeekLIST=true;
	      this. seek();
	   },
	   del(ins){
	      
	       var _this = this
	      this.isSeekLIST=false;
	      this.Seeks = this.seek_LIST[ins].name;
		  this.$router.push({
		        path:"/"		
		  })
		  if(this.$store.state.istartAdd ==0){
		        this.$store.commit("SATRT",_this.seek_LIST[ins].name)
		  }else{
		       this.$store.commit("END",_this.seek_LIST[ins].name)
		  }
	   },
	   UserSeek(){
	        var _this = this
	      this.isSeekLIST=false;
	      
		  this.$router.push({
		        path:"/"		
		  })
		  if(this.$store.state.istartAdd ==0){
		        this.$store.commit("SATRT",_this.Seeks)
		  }else{
		       this.$store.commit("END",_this.Seeks)
		  }
	   }
	   
  }
}
</script>

<style scoped>
*{margin:0;padding:0;}
.AddressSeek{
      background:#f1f1f1;
	  width:100%;
	  height:100vh;
	  position:fixed;
	  z-index:99;
   }
   #AddressSeek_head{ 
           width:100%;
	       height:8vh;
           background:#ff4a39;		   
		   position:fixed;
		   line-height:8vh;
           text-align:center;
		  
		 }
 #back_fare{
    width:10vw;
	height:9vh;
	float:left;
	font-size:1.6rem;
	color:#ffffff;
	font-size:3rem;
}
#head_title{
        color:#ffffff;
		font-size: 1.6rem;
		margin-left:5vw;
		}
#Aroute{
    color:#ffffff;
		font-size: 1.6rem;
		margin-right:5vw;
		float:right;
}
#input_search_key{
    height:60%;
	width:60%;
	border-radius:6px;
	border:none;
	margin-right:6vw;
	text-align:center;
}	
#abolish{
      font-size:2rem;
	  color:#ffffff;
}	
#crity_list{
    width:20vw;
	height:9vh;
	float:left;
	font-size:1.6rem;
	color:#ffffff;
}	

.bm-view {
  width: 100%;
  height: 300px;
}
#AddressSeek_main{
     margin-top:8vh;
}
#seekLIST{
    width:90vw;
	height:40%;
	background:#ffffff;
	position:fixed;
	top:8.5vh;
	left:5vw;
	z-index:102;
	overflow:scroll;
}
#seekLIST li{
   border-bottom:1px solid #cccccc;
   height:8vh;
   padding:3vw;
   display:flex;
   justify-content:center;
    flex-direction:column;
}
#seekLIST h2{
   font-size:1.5rem;
   color:black;
   
}
#seekLIST p{
    color:#cccccc;
	margin-top:1vh;
	font-size:1.4rem;
}
</style>
